<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>

<body>
    <div id="test"></div>
    <div id="test2"></div>

    <script type="text/babel">
        class Person extends React.Component {
            // 初始化状态
            state = { name: "tom", sex: "男", age: 20 }

            render() {
                // const {name,sex,age} = this.state;

                // props 用于存放从组件外部传入组件内部的内容
                let { name, sex, age } = this.props
                // this.props.age = 99; //会报错，因为props对象中的属性，都是只读的
                /*
                    let name = this.props.name
                    let sex = this.props.sex
                    let age = this.props.age
                */
                age = 99;  //不会报错，成功修改

                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age}</li>
                    </ul>
                )

            }
        }

        ReactDOM.render(<Person name="张三" sex='男' age='20' />, document.getElementById('test'))

        // 模拟服务器返回的一个人的数据
        const p1 = {
            name: "kiki",
            sex: '女',
            age: '19'
        }
        // ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex} />, document.getElementById('test2'))
        // 批量传递——展开语法
        // 在jsx中，可以使用展开语法展开一个对象，但是仅仅适用于传递标签属性
        ReactDOM.render(<Person {...p1} />, document.getElementById('test2'))
        
        console.log("###",...p1);  //
    </script>
</body>

</html>